<template>
    <div v-loading="loading">
        <template v-if="route.name == 'regulatoryStandard'">
            <div class="queryForm">
                <el-input size="large" v-model="queryParams.meansName" placeholder="请输入关键字" style="width: 500px;">
                    <template #append><el-button class="btn" @click="handleQuery">搜索</el-button></template>
                </el-input>
            </div>
            <p class="tag">
                <span style="width: 100px;">发布日期：</span>
                <el-space wrap :size="20" style="flex: 1;">
                    <template
                        v-for="item, index in [{ label: '全部', value: '' }, { label: '近三年', value: '3 year' }, { label: '近一年', value: '1 year' }, { label: '近一月', value: '1 month' }]"
                        :key="index">
                        <span @click="chickHandle(item, index)" :class="[{ active: index === current }, 'spanStyles']">{{
                            item.label
                        }}</span>
                    </template>
                </el-space>
            </p>
            <p class="tag">
                <span style="width: 100px;">案例类别：</span>
                <el-space wrap :size="20" style="flex: 1;">
                    <template v-for="item, index in option" :key="index">
                        <span @click="chickHandle1(item, index)" :class="[{ active: index === current1 }, 'spanStyles']">{{
                            item.typeName
                        }}</span>
                    </template>
                </el-space>
            </p>

            <el-divider></el-divider>
            <el-row>
                <el-col>
                    <ul v-if="dataList.length > 0">
                        <li v-for="item in dataList" :key="item.id">
                            <RouterLink target="_blank" :to="{ path: '/viewItemFile', query: { id: item.meansUploadAtt[0].attachId } }">
                                <el-row>
                                    <el-col :span="22" :xs="18" :sm="18" class="ellipsis">
                                        <span>{{ item.meansName }}</span>
                                    </el-col>
                                    <el-col :span="2" :xs="6" :sm="6" style="text-align: center;color: #999">{{
                                        item.createTime }}</el-col>
                                </el-row>
                            </RouterLink>
                        </li>
                    </ul>
                    <el-empty description="暂无数据" v-else />
                    <pagination style="margin-top: 15px" v-show="total > 0" :total="total" v-model:page="queryParams.page"
                        v-model:limit="queryParams.rows" @pagination="getList" />
                </el-col>
            </el-row>
        </template>
        <template v-else>
            <router-view></router-view>
        </template>
    </div>
</template>
    
<script setup name="regulatoryStandard">
import { getPurpose } from "@/api/serviceCase/typicalCase.js"
import { getAllList } from "@/api/knowledgeLearn/technicalData"
import { RouterLink } from "vue-router";
import {useWebsocket} from "@/utils/socket"
const route = useRoute();
const router = useRouter();

const option = ref([]);
const dataList = ref([]);
const loading = ref(false);
const total = ref(0);
const data = reactive({
    queryParams: {
        page: 1,
        rows: 10,
        meansName: undefined,
        releaseDate: '',
        meansTypeId: undefined,
        releaseColumn: '法规标准',
        releaseStatus:0,
    },
})
const { queryParams, } = toRefs(data);
const current = ref(0);
const current1 = ref(0);

function handleQuery() {
    queryParams.value.page = 1;
    getList();
}


function chickHandle(item, index) {
    current.value = index;
    queryParams.value.releaseDate = item.value;
    handleQuery();
}

function chickHandle1(item, index) {
    if(index==current1.value)return;
    current1.value = index;
    if (item.id == 0) {
        queryParams.value.meansTypeId = '';
    } else {
        queryParams.value.meansTypeId = item.id;
    }
    handleQuery();
}

function getType() {
    getPurpose({ plate: '法规标准' }).then(res => {
        if (res.data) {
            option.value = [{ typeName: '全部', id: 0, }, ...res.data]
        } else {
            option.value = []
        }
    })
}

/** 查询数据列表 */
function getList() {
    loading.value = true;
    getAllList({ ...queryParams.value }).then(response => {
        dataList.value = response.data.rows ? response.data.rows : [];
        total.value = response.data.total;
        loading.value = false;
    }).catch(err=>{loading.value = false;});
}

// WebSocket
const ws = useWebsocket()
ws.onmessage = (e) => {
    if(JSON.parse(e.data).moduleType=='infDelivery'){
      getAllList({ ...queryParams.value }).then(response => {
        dataList.value = response.data.rows ? response.data.rows : [];
        total.value = response.data.total;
      });
    }else if(JSON.parse(e.data).moduleType=='typeManage'){
      getType();
    }
  };

//页面卸载，关闭socket
onUnmounted(() => {
  ws.close();
});
onMounted(() => {
    getType();
    getList();
})
</script>
    
<style scoped lang="scss">
.queryForm {
    padding: 20px 30px;
    width: 100%;
    text-align: center;
    margin: 10px 0px;

    .el-input-group__append {
        background-color: #107ce5 !important;
        color: #fff !important;
    }

    .btn {
        height: 40px;
        background-color: #107ce5 !important;
        color: #fff !important;
        border-radius: 0px !important;
    }
}

.tag {
    display: flex;
    justify-content: space-between;
    color: #333333;
    font-size: 16px;

    span {
        height: 30px;
        line-height: 30px;
        display: inline-block;
    }

    .spanStyles {
        display: inline-block;
        padding: 0px 10px;
        height: 30px;
        line-height: 30px;
        border-radius: 4px;
        cursor: pointer;
    }

    .active {
        color: #107ce5;
        background-color: #c6e2ff;
        cursor: pointer;
    }
}

li {
    color: #333;
    margin: 30px 0;
    font-size: 16px;
}

ul li::marker {
    font-size: 20px;
}

li:hover {
    color: #107ce5;
    cursor: pointer;
}

.ellipsis {
    display: inline-block;
    // width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
    
    